<template>
  <div class="common-layout">
    <el-container v-if="!isMobile">
      <!-- 左菜单栏 -->
      <el-aside width="auto" class="aside"><CommonAside /></el-aside>
      <el-container>
        <!-- 头 -->
        <el-header class="header"><CommonHeader /></el-header>
        <!-- 面包屑 -->
        <CommonTag />

        <!-- 路由出口 -->
        <el-main>
          <router-view v-slot="{ Component }">
            <transition name="fade-right" mode="out-in">
              <component :is="Component" />
            </transition>
          </router-view>
        </el-main>
      </el-container>
    </el-container>

    <MobileHome v-else />
  </div>
</template>

<script>
import CommonAside from '../components/CommonAside.vue'
import CommonAsidenew from '../components/CommonAsidenew.vue'
import CommonHeader from '../components/CommonHeader.vue'
import CommonTag from '../components/CommonTag.vue'
import MobileHome from '../views/heme/MobileHome.vue'

export default {
  name: 'HomeView',
  components: {
    CommonAside,
    CommonAsidenew,
    CommonHeader,
    CommonTag,
    MobileHome
  },
  data() {
    return {
      windowWidth: window.innerWidth
    }
  },
  computed: {
    isMobile() {
      // 判断窗口宽度是否小于某个值来判断是否为移动设备
      return this.windowWidth <= 768
    }
  },
  mounted() {
    // 监听窗口大小变化
    window.addEventListener('resize', this.handleResize)
  },
  beforeUnmount() {
    // 移除监听
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      this.windowWidth = window.innerWidth
    }
  }
}
</script>
<style lang="less" scoped>
// 进入后和离开前保持原位
.fade-right-enter-to,
.fade-right-leave-from {
  opacity: 1;
  transform: none;
}

// 设置进入和离开过程中的动画时长0.5s
.fade-right-enter-active,
.fade-right-leave-active {
  transition: all 0.3s;
}

// 进入前和离开后为透明，并在右侧20px位置
.fade-right-enter-from,
.fade-right-leave-to {
  opacity: 0;
  transform: translateX(20px);
}

.aside {
  z-index: 1;
  box-shadow: 2px 0px 1px 0px rgba(236, 236, 236, 0.5);
}
.header {
  border-bottom: 2px solid black;
}
.el-header {
  padding: 0;
}
.el-menu {
  border-right: none;
}

/* 主内容区域样式 */
.el-main {
  /* 计算 el-main 高度 */
  /* 100vh 表示视口的高度，减去 header 高度和 aside 宽度 */
  height: calc(100vh - 60px - 250px);
  overflow-y: auto; /* 当内容超出时，显示垂直滚动条 */
  overflow-x: hidden; /* 隐藏水平滚动条 */
}
/* 隐藏滚动条 */
:deep(.el-main::-webkit-scrollbar) {
  width: 8px; /* 定义滚动条宽度 */
  height: 8px;
  background-color: transparent; /* 滚动条背景颜色 */
}
/* 总布局容器样式 */
.common-layout {
  height: 100vh; /* 占满整个视口高度 */
  display: flex; /* 使用 flex 布局 */
  flex-direction: column; /* 垂直方向布局 */
}
</style>